<template>
  <div>
    <div class="user-info">
      <div class="top">
        <div class="top-img">
          <div class="avator">
            <img v-if="avatar" :src="avatar" alt="">
            <img v-else src="../../../assets/images/default_avator.png" alt="">
          </div>
          <div class="name">{{ name }}</div>
        </div>
        <div class="top-nav">
          <div class="top-nav-item" @click="goToOrder('order_type', 0)">
            <img src="../../../assets/images/icon/user_all.png" alt="">
            <div class="txt">全部</div>
          </div>
          <div class="top-nav-item" @click="goToOrder('pay_status', 0)">
            <span v-if="notPayOrderCount > 0" class="num">{{ notPayOrderCount }}</span>
            <img src="../../../assets/images/icon/user_pay.png" alt="">
            <div class="txt">待付款</div>
          </div>
          <div class="top-nav-item" @click="goToOrder('status3', 3)">
            <span v-if="notShipOrderCount > 0" class="num">{{ notShipOrderCount }}</span>
            <img src="../../../assets/images/icon/user_deliver.png" alt="">
            <div class="txt">待发货</div>
          </div>
          <div class="top-nav-item" @click="goToOrder('status4', 4)">
            <span v-if="notGetStoreCount > 0" class="num">{{ notGetStoreCount }}</span>
            <img src="../../../assets/images/icon/user_receive.png" alt="">
            <div class="txt">待收货</div>
          </div>
        </div>
      </div>
      <div class="middle-nav">
        <div class="middle-nav-item" @click="goToLink('order-list')">
          <svg-icon icon-class="user_order" />
          <span class="txt">我的订单</span>
          <svg-icon class="right" icon-class="icon_right" />
        </div>
        <div class="middle-nav-item" @click="goToLink('refund-list')">
          <svg-icon class="refund" icon-class="icon_refund" />
          <span class="txt">退单/售后</span>
          <svg-icon class="right" icon-class="icon_right" />
        </div>
        <div class="middle-nav-item" @click="goToLink('user-address')">
          <svg-icon icon-class="user_address" />
          <span class="txt">收货地址</span>
          <svg-icon class="right" icon-class="icon_right" />
        </div>
        <div class="middle-nav-item" @click="goToLink('user-info')">
          <svg-icon icon-class="user_info" />
          <span class="txt">个人资料</span>
          <svg-icon class="right" icon-class="icon_right" />
        </div>
        <div class="middle-nav-item" @click="goToLink('user-account')">
          <svg-icon icon-class="user_account" />
          <span class="txt">账户余额</span>
          <svg-icon class="right" icon-class="icon_right" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderCount } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
  name: 'Index',
  data() {
    return {
      notPayOrderCount: 0, // 未付款
      notShipOrderCount: 0, // 代发货
      notGetStoreCount: 0 // 待收货
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'name'
    ])
  },
  mounted() {
    this.getOrderCountFn()
  },
  methods: {
    // 获取订单角标数量
    getOrderCountFn() {
      getOrderCount().then(res => {
        const data = res.data
        if (data.status_code === 200) {
          this.notPayOrderCount = data.data.notPayOrderCount
          this.notShipOrderCount = data.data.notShipOrderCount
          this.notGetStoreCount = data.data.notGetStoreCount
        }
      })
    },
    goToOrder(data, val) {
      this.$router.push({
        name: 'order-list',
        query: {
          type: data,
          value: val
        }
      })
    },
    goToLink(link) {
      this.$router.push({
        name: link
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .user-info{
    /*padding-bottom: pxCalc(90px);*/
    .top{
      height: pxCalc(300px);
      background: #fff;
      margin-bottom: pxCalc(10px);
    }
    .top-img{
      width: 100%;
      background: url("../../../assets/images/userTop.jpg") no-repeat;
      height: pxCalc(210px);
      background-size:100% auto;
      padding-top: pxCalc(52px);
      .avator{
        width: pxCalc(60px);
        height: pxCalc(60px);
        margin: 0 auto;
        border-radius: pxCalc(40px);
        border:2px solid #fff;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .name{
        font-size: pxCalc(14px);
        color: #fff;
        margin-top: pxCalc(10px);
        text-align: center;
      }
    }
    .top-nav{
      padding: pxCalc(20px) pxCalc(20px) 0;
      font-size: 0;
      &-item{
        display: inline-block;
        width: 25%;
        text-align: center;
        position: relative;
        img{
          width: pxCalc(20px);
          margin-bottom: pxCalc(5px);
        }
        .num{
          position: absolute;
          min-width: pxCalc(16px);
          height: pxCalc(16px);
          line-height: pxCalc(16px);
          text-align: center;
          color: #fff;
          background: #ff0000;
          border-radius: 15px;
          font-size: pxCalc(12px);
          top: pxCalc(-6px);
          right: pxCalc(20px);
        }
        .txt{
          font-size: pxCalc(13px);
          color: #333333;
        }
      }
    }
    .middle-nav{
      padding-left: pxCalc(20px);
      background: #fff;
      &-item{
        padding-left: pxCalc(5px);
        height: pxCalc(50px);
        line-height: pxCalc(50px);
        border-bottom: pxCalc(1px) solid #f2f2f2;
        &:last-child{
          border: none;
        }
        .svg-icon{
          font-size: pxCalc(15px);
        }
        .refund{
          font-size: pxCalc(13px);
          color: #777777;
        }
        .txt{
          margin-left: pxCalc(2px);
          font-size: pxCalc(14px);
          color:#1a1a1a;
        }
        .right{
          float: right;
          color: #d5d5d5;
          font-size: pxCalc(20px);
          margin-top: pxCalc(15px);
          margin-right: pxCalc(13px);
        }
      }
    }
  }
</style>
